```jsx
import * as tabs from "@zag-js/tabs"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId, For } from "solid-js"

const data = [
  { value: "item-1", label: "Item one", content: "Item one content" },
  { value: "item-2", label: "Item two", content: "Item two content" },
  { value: "item-3", label: "Item three", content: "Item three content" },
]

export function Tabs() {
  const service = useMachine(tabs.machine, {
    id: createUniqueId(),
    defaultValue: "item-1",
  })

  const api = createMemo(() => tabs.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <div {...api().getListProps()}>
        <For each={data}>
          {(item) => (
            <button {...api().getTriggerProps({ value: item.value })}>
              {item.label}
            </button>
          )}
        </For>
      </div>
      <For each={data}>
        {(item) => (
          <div {...api().getContentProps({ value: item.value })}>
            <p>{item.content}</p>
          </div>
        )}
      </For>
    </div>
  )
}
```
